<template>
  <div class="talk" v-if="this.data">
    <div class="top-top">
      <h2>话题</h2>
      <span
        @click="addTopdz(data[0].id, data[0].wcid)"
        v-once-click
        class="top-up"
      >
        说得真好给你点个赞! <em class="el-icon-thumb"></em
      ></span>
    </div>
    <div class="talks-inner">
      <div class="item">
        <div class="uheader">
          <img :src="this.data[0].photo" alt="" />
        </div>
        <div class="utalks">
          <span class="uname">
            刘小怂
            <em
              @click="addTopgz(data[0].id)"
              v-once-click
              class="el-icon-message-solid"
            ></em>
          </span>
          <span class="uword">{{ this.data[0].theme }}</span>
          <div class="time-pl">
            <span class="two">
              <em
                @click="addTopdz(data[0].id, data[0].wcid)"
                v-once-click
                class="el-icon-trophy"
                >{{ this.data[0].dianzan }}</em
              >
              <em class="el-icon-chat-dot-round">{{ this.data[0].pinglun }}</em>
              <em class="el-icon-star-off">{{ this.data[0].shoucang }}</em>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="top-top">
      <h2>评论</h2>
      <span class="top-up">
        我有一言,请诸位静听! <em class="el-icon-thumb"></em
      ></span>
    </div>
    <div class="down" v-for="items in this.data" :key="items.ctid">
      <div class="down-inner">
        <div class="uheader">
          <img :src="items.rphoto" alt="" />
        </div>
        <div class="utalks">
          <span class="uname">
            {{ items.rname }}
            <em
              @click="addChatgz(items.reid)"
              v-once-click
              class="el-icon-message-solid"
            ></em>
          </span>
          <span class="uword">{{ items.reply }}</span>
          <div class="time-pl">
            <span class="two">
              <em
                @click="addChatdz(items.reid, items.wcid)"
                class="el-icon-trophy"
                >{{ items.rdianzan }}</em
              >
            </span>
          </div>
        </div>
      </div>
      <hr />
    </div>
    <div class="pagination">
      <button @click="minusPage" :disabled="this.page == 1">上一页</button>
      <span>{{ page }}</span>
      <button @click="addPage" :disabled="this.maxPage == page">下一页</button>
      <span>共{{ this.maxPage }}页</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      page: 1,
      maxPage: 1,
    };
  },

  mounted() {
    this.getData();
  },
  //监听页数发生改变
  watch: {
    page() {
      this.getData();
    },
  },
  methods: {
    // 挂载时(页面出生,显示),自动触发请求
    // 发送请求
    getData() {
      const url =
        `http://127.0.0.1:3000/v1/library/wechatlist/` + this.$route.params.id;
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
      });
    },
    addTopgz(id) {
      const url1 = "http://127.0.0.1:3000/v1/library/updateguanzhu";
      const params = `id=${id}`;
      console.log(url1, params);
      this.axios.put(url1, params).then((res) => {
        console.log("关注成功！");
      });
    },
    addTopdz(id, wcid) {
      const url2 =
        "http://127.0.0.1:3000/v1/library/chatdetails/updatezhutidianzan";
      const params = `id=${id}&wcid=${wcid}`;
      console.log(url2, params);
      this.axios.put(url2, params).then((res) => {
        console.log("点赞成功！");
        this.getData();
      });
    },
    addChatdz(reid, wcid) {
      const url3 =
        "http://127.0.0.1:3000/v1/library/chatdetails/updatepinglundianzan";
      const params = `reid=${reid}&wcid=${wcid}`;
      console.log(url3, params);
      this.axios.put(url3, params).then((res) => {
        console.log("点赞成功！");
        this.getData();
      });
    },
    addChatgz(reid) {
      const url4 = "http://127.0.0.1:3000/v1/library/updateguanzhu";
      const params = `id=${reid}`;
      console.log(url4, params);
      this.axios.put(url4, params).then((res) => {
        console.log("关注成功！");
      });
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.time-pl {
  width: 100%;
  // border: 1px solid black;
  .two {
    display: flex;
    justify-content: flex-end;
    margin-right: 15px;
    // align-items: center;

    em {
      padding: 10px;
    }
  }
}

.talk {
  width: 1200px;
  margin: 0 auto;
  // padding: 20px
  .talks-inner {
    display: flex;
    flex-direction: column;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid black;
      padding-bottom: 10px;

      span > span {
        background: #f7f8fa;
        font-size: 14px;
        color: #999;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        margin-bottom: 8px;
        overflow: hidden;
      }
      img {
        width: 50px;
        height: 50px;
        margin: 20px;
        border-radius: 50%;
      }
      .utalks {
        width: 100%;
        // display: inline-block;
        display: flex;
        flex-direction: column;
        .uname {
          // width: 100%;
          font-size: 14px;
          color: #999;
          margin: 20px 0;
        }
        .uword {
          margin: 15px 0;
        }
        .word {
          // width: 100%;
          background: #f7f8fa;
          font-size: 14px;
          color: #999;
          height: 40px;
          line-height: 40px;
          padding-left: 10px;
          margin-bottom: 8px;
          overflow: hidden;
        }
      }
    }
  }
  .more {
    text-align: center;
    // margin: 15px 0;
    padding: 15px 0;
  }

  .top-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 5px solid black;
    > h2 {
      margin-left: 20px;
    }

    .top-up {
      margin: 10px 20px;
      padding: 10px;
      border-radius: 5px;
      background-color: #46aaff;
      color: white;
    }
  }
  .down {
    width: 100%;
    .down-inner {
      display: flex;
    }

    img {
      width: 50px;
      height: 50px;
      margin: 20px;
      border-radius: 50%;
    }
    .utalks {
      width: 100%;
      display: flex;
      flex-direction: column;
      .uname {
        // width: 100%;
        font-size: 14px;
        color: #999;
        margin: 15px 0;
      }
      .uword {
        margin: 15px 0;
      }
      .word {
        // width: 100%;
        background: #f7f8fa;
        font-size: 14px;
        color: #999;
        // height: 40px;
        // line-height: 40px;
        padding-left: 10px;
        margin-bottom: 8px;
        overflow: hidden;
      }
    }
  }
}
.pagination {
  text-align: center;
  padding: 15px;
  // border: 1px solid black;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}
</style>